3D Solar System Documentation

In this documentation we'll explore how to upload the files to your host and how the files can be editted to your preference.

The HTML file is structured to create a dynamic, interactive 3D model of the solar system. It utilizes a combination of standard HTML elements and custom IDs and classes to organize the content and structure. Key elements include containers for the universe, solar system, and various controls for user interaction.

The CSS file provides styling to the HTML elements, defining the visual aspects of the solar system model and the user interface. It includes styles for positioning, animations, and responsiveness, ensuring the model is visually appealing and functional across different devices.

The JavaScript file adds interactivity to the web page, using jQuery for DOM manipulation. It defines functions for initializing the 3D model, handling user inputs through buttons and links, and toggling between different views and settings of the solar system. The script facilitates dynamic changes in the model's appearance and behavior based on user interaction.


Getting Started

Let's start by downloading and seperating the 3D Solar System Folder and the documentation folder. You do not need to upload the "Documentation" folder.

Step 1

Ensuring the "3D Solar System" folder is extracted, open your preferred FTP client.

Step 2
  1. Login to your FTP client and the server you wish to upload the 3D solar system to.
  2. Select the the folder and begin uploading the files to your server / website.
  3. Once you finish uploading and the folder is located in the place you want within your server/website navigate to the destination URL.
  4. Verify the 3D solar system loads and works as expected.
Folder Contents

Let's see whats inside the folder and how you can use it to edit the look & feel of the solar system.

- Assets
This folder contains the Javascript and CSS for the Solar System.

- style.css
The style.css contains some of the text used such as the "speed" and also where the images are stored for each planet. Change the image of the planet to your preferred image but keep in mind the sizes. You wouldn't for example want to make Earth bigger then Jupiter if you want the look and feel to be accurate to our actual solar system.

- scripts.js
This file contains the code for the right-hand toggle and action menu aswell as the the planet switcher on the bottom. Remember when making edits to the scripts.js file to reference the CSS and ensure the text is properly being called.


Common Edits

Let's look into how to edit images and text.

File Description
style.css From line 1398 to 1433, you'll find the image locations. Change the path to your preferred image if you have one and refresh the page to see it live.
style.css To change the velocity text, navigate to the style.css file and head down to line 1 - 3. Change the text to your preferred metric, i.e: MPH.